<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<!-- 表格的主要作用：显示、展示数据，因为他可以让数据整齐的显示，特别是后台的数据 -->
	<!-- border是设置边框
    align 设置对其方式，left; right; center;
    cellspacing 设置  单元格与单元格之间的距离
    cellpadding 单元格与内容之间的距离
    th是表头标签 
    thead 表格头部
    tbody 表格主题
    caption 表格顶部的标题
    删除表格 colspan ,colspan
     -->

	<table border="1" width="300" height="200" align="center" cellspacing="0" cellpadding="0">

		<tr align="center">
			<!-- 批量替换 alt+shift  -->
			<th>姓名</td>
			<th>性别</td>
			<th>职位</td>
			<th>技能</td>
		</tr>
		<tr align="center">
			<td>田起焕</td>
			<!-- 合并表格 -->
			<td rowspan="3">男</td>
			<td>宣传部</td>
			<td>修图</td>
		</tr>
		<tr align="center">
			<td>莫毅</td>
			<!-- <td>男</td> -->
			<td>学习部</td>
			<td>未知在学</td>
		</tr>
		<tr align="center">
			<!-- <td>包旭</td> -->
			<td>男</td>
			<td>师长</td>
			<td>打架</td>
		</tr>
	</table>
	<br>
	<!-- 2021.08.15复习 -->
	<!-- table是一个大的表格，tr是一行，td是一个单元格 ，th是表头标签，位于第一行，默认文字会加粗居中-->
	<table align="center" border="1px" cellpadding="0px" cellspacing="0px" width="650px" height="300px">
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>还没想好</th>
		</tr>
		<tr align="center">
			<td >8</td>
			<td colspan="2">2</td>
			<!-- 跨行合并 -->
			<!-- <td>3</td> -->
				<!-- 删除一个多余的单元格 -->
			<td>4</td>  
		
		</tr>
		<tr align="center">
			<td rowspan="2">1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr align="center">
			<!-- <td>1</td> -->
			<!-- 这一行就是多余 -->
			<td>2</td>
			<td>3</td>
			<td>4</td>
	</table>
</body>

</html>